<template>
	<view class="guide-page">
		<bnn-loading :loading="isLoading"/>
		<view class="guide-scroll">
			<view class="guide-header tab-list">
				<view v-for="(tab, key) in tabList" :key="key" :class="{active: tabKey === key}" class="tab-item" @click="onSwitchTab(tab, key)">
					<view class="tab-name">{{tab.name}}</view>
					<view class="tab-underline"></view>
				</view>
			</view>
			<view class="h-line"></view>
			<view class="guide-body">
				<view v-if="tabKey === 0" class="operate-guide">
					<uni-list>
						<uni-list-item v-for="(item, key) in operateList" :key="key" :title="item.title" :thumb="`https://sou-liang.oss-cn-shanghai.aliyuncs.com/weixin/images/serialNumber/${iconList[key]}.png`" 
						@click="onClickGuide(item, key)"/>
					</uni-list>
				</view>
				<view v-if="tabKey === 1" class="common-problem">
					<u-collapse :body-style="problemstyle" :item-style="itemStyle">
						<u-collapse-item :title="item.title" v-for="(item, index) in problemList" :key="index">
							 <view class="rich-text" v-html="item.content"></view>
							 <view :class="{'att':index == 2}"></view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getArticlePage,getArticleView} from '@/api/addons.js'
	import {toSystemGuideDetailPage} from '@/utils/PageRouter.js'
	import BnnLoading from '@/components/bnn-ui/loading/index.vue'
	import uniList from '@/components/uni-ui/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue'
	
	export default {
		components: {
			uniList,
			uniListItem,
			BnnLoading
		},
		data() {
			return {
				tabKey: 0,
				tabList: [
					{name: '操作指导', id: '10'},
					{name: '常见问题', id: '11'},
				],
				iconList: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'],
				isLoading: true,
				operateList: [],
				problemList: [],
				problemstyle:{
					// padding:'0 15px',
					padding:'10rpx 34rpx',
				},
				itemStyle:{
					borderBottom:'1rpx solid #e5e5e5',
					padding:'0 22rpx',
				}
			}
		},
		onLoad() {
			this.getPage()
		},
		methods: {
			async getPage() {
				const {tabKey, tabList} = this
				const tabInfo = tabList[tabKey]
				await getArticlePage({ cate_id: 10, page: 1, limit: 10 }).then(res => {
					const { list } = res.data
					this.operateList = list
				})
				
				await getArticlePage({ cate_id: 11, page: 1, limit: 10 }).then(res => {
					const { list } = res.data
					for(let i=0; i<list.length; i++){
						 list[i].content = list[i].content.replace(/<br\/>/g,'')+"<br>";
					}
					this.problemList = list
				})
				
				setTimeout(() => {
					this.isLoading = false
				}, 200)
			},
			//	切换tab
			onSwitchTab(tab, key){
				this.tabKey = key
			},
			//	点击指南事件
			onClickGuide(item, key) {
				toSystemGuideDetailPage(item.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.att{
		height:60rpx;
	}
	
	.rich-text{
		padding-bottom: 20rpx;
	}
	.guide-page{
		.tab-list{
			height: 100rpx;
			display: flex;
			font-size: 32rpx;
			align-items: stretch;
			.tab-item.active{
				font-weight: bold;
				.tab-underline{
					display: block;
				}
			}
			.tab-item{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
			}
			.tab-underline{
				width: 100rpx;
				height: 4rpx;
				left: 50%;
				bottom: 0;
				display: none;
				position: absolute;
				transform: translateX(-50%);
				background-color: $theme_color;
			}
		}
		
		.guide-body{
			background-color: #fff;
		}
	}
</style>
